<template>
    <div class="detailedList">
        <navs :navtitle="title"></navs>
        <ul class="detailedList-list" v-if="orderDealerVoList">
            <li  v-for="(item,indexs) in orderDealerVoList.orderGoodsVos" :key="indexs">
                <div class="img-wrap">
                    <img :src="item.picUrl" alt="">
                </div>
                <div class="list-right">
                    <p>{{item.goodsName}}</p>
                    <div class="foot">
                        <p class="price">￥<span>{{item.preferentialPrice}}</span></p>
                        <p class="count">×{{item.totalQuantity}}{{item.firstUnit}}</p>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
import navs from '../../components/Navbar'
export default {
    components:{
        navs,
    },
    data(){
        return{
            title:'商品清单',
            index:''
        }
    },
    computed:{
        orderDealerVoList() {
            return this.$store.state.order.orderDealerVoList[this.index]
        }
    },
    mounted(){
        let index=this.$route.params.index
        this.index=index
        console.log(index)
    }
}
</script>
<style scoped lang="scss">
.detailedList-list{
    li{
        padding: 0.14rem;
        display: flex;
        position: relative;
        .img-wrap{
            width: 1rem;
            height: 1rem;
            min-width: 1rem;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .list-right{
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                margin-left: 0.09rem;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            p{
                font-size: 0.14rem;
                color: #333;
                
            }
            .foot{
                display: flex;
                .price{
                    color: #dd3333;
                    font-size: 0.12rem;
                    span{
                        font-size: 0.14rem;
                    }
                }
                .count{
                    color: #999;
                    font-size: 0.12rem;
                    margin-left: 0.05rem;
                }

            }
        }
    }
    li::after{
        position: absolute;
        content: "";
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        transform: scale(1,0.5);
        background: #e1e1e1;
    }
}
</style>
